<template>
  <div>
    <Body ref="body">
    </Body>

    <el-image
      v-if="commentList.length===0"
      class="indexItem"
      :src="require('@/assets/msg/img.png')">
    </el-image>
    <el-table
      v-else
      :data="commentList"
      border
      v-loading="dataListLoading"
      :show-header="false"
      style="width: 81%; left: 9.5%;top: -20px; background-color: #E9EEF3;"
    >
      <el-table-column
        :show-overflow-tooltip="false"
        width="300%"
        style="background-color: #E9EEF3"
        prop="sourceUserInfo" header-align="center" align="center" label="分组id">
         <template slot-scope="scope">
           <el-row>
             <div>
               <el-col :span="5" >
                 <el-avatar size="small" :src="scope.row.sourceUserInfo.userImg">
                 </el-avatar>
               </el-col>
               <el-col :span="18" style="max-height: 50px;">
                 <el-row>
                   <span v-if="scope.row.messageType===0">
                     {{scope.row.sourceUserInfo.userName}}评论了你{{scope.row.messageText}}
                   </span>
                 </el-row>
               </el-col>
             </div>
           </el-row>
         </template>
      </el-table-column>
      <el-table-column
        style="background-color: #E9EEF3; "
        prop="messageText" header-align="center" align="center" label="组名"></el-table-column>
    </el-table>
    <el-pagination
      v-show="commentList.length!==0"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page=pageIndex
      :page-sizes="[10, 20, 50, 100]"
      :page-size=pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalPage">
    </el-pagination>

  </div>
</template>

<script>
import Body from '@/pages/messages/index.vue'
export default {
  components: {
    Body,
  },
  data() {
    return {

      commentList:[],
      dataListLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  computed: {},
  watch: {},
  methods: {
    /**
     * 获取评论列表
     */
    getCommentList(){
      this.$http({
        url: this.$http.adornUrl('/user/message/commentMsgs'),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.commentList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.commentList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },


    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getCommentList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getCommentList();
    },
  },
  beforeCreate() {


  },

  created() {
    this.getCommentList()
  },

  beforeMount() {
    // this.getCommentList()
  },

  mounted() {
    // this.getCommentList()
  },

  beforeUpdate() {

  },

  updated() {

  },

  beforeDestroy() {

  },
  destroyed() {

  },

  activated() {

  }
}
</script>

<style scoped>
.indexItem {
  display: flex;
  //justify-content: space-between;
  //align-items: center;
  max-height: 30%;
  max-width: 81%;
  padding-left: 9.5%;
  margin-top: -20px;
}

</style>

